<template>
  <vxe-modal title="查看科技人员" min v-model="dialogVisible" v-if="dialogVisible" width="50%" esc-closable show-zoom resize>
    <el-tabs type="border-card">
      <el-tab-pane label="基本资料">
        <span slot="label"><svg-icon icon-class="jbzl"/> 基本资料</span>
        <div style="height: 77vh; overflow-y: auto;">
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  姓名：
                </div>
              </template>
              {{ rowData.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  性别：
                </div>
              </template>
              <dict-tag :options="dict.type.sys_user_sex" :value="rowData.sex"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  身份证号：
                </div>
              </template>
              {{ rowData.sfzh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  出生日期：
                </div>
              </template>
              {{ rowData.csrq }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  职称：
                </div>
              </template>
              <dict-tag :options="dict.type.rcpt_zc" :value="rowData.zc"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  职务：
                </div>
              </template>
              {{ rowData.zw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  学历：
                </div>
              </template>
              {{ rowData.xl }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  毕业院校：
                </div>
              </template>
              {{ rowData.byYx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  所学专业：
                </div>
              </template>
              {{ rowData.sxZy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  熟悉领域：
                </div>
              </template>
              <dict-tag :options="dict.type.rcpt_sxly" :value="rowData.sxLy"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  人员分类：
                </div>
              </template>
              <dict-tag :options="dict.type.rcpt_ryfl" :value="rowData.ryFl"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  是否专家：
                </div>
              </template>
              <dict-tag :options="dict.type.rcpt_sf" :value="rowData.sfZj"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  电话 ：
                </div>
              </template>
              {{ rowData.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  QQ ：
                </div>
              </template>
              {{ rowData.qq }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  是否在职：
                </div>
              </template>
              <dict-tag :options="dict.type.rcpt_sf" :value="rowData.sfZz"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  所属单位 ：
                </div>
              </template>
              {{ rowData.ssDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  专业特长 ：
                </div>
              </template>
              {{ rowData.zyTc }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions class="margin-top" :column="1" size="medium" border  direction="vertical">
            <el-descriptions-item>
              <template slot="label">
                <div>
                  <i class="el-icon-office-building"></i>
                  个人简介 ：
                </div>
              </template>
              {{ rowData.grJj }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div>
                  <i class="el-icon-office-building"></i>
                  证件照 ：
                </div>
              </template>
              <image-preview :src="rowData.zjZ" :width="100" :height="100" show-overflow-tooltip/>
            </el-descriptions-item>
          </el-descriptions>

        </div>
      </el-tab-pane>
      <el-tab-pane label="工作履历">
        <span slot="label"><i class="el-icon-date"></i> 工作履历</span>
        <div style="height: 77vh; overflow-y: auto;">
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="kjRyGzlvData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="开始时间" align="center" prop="ksTime" width="110"/>
            <el-table-column label="截止时间" align="center" prop="jzTime" width="110"/>
            <el-table-column label="单位/部门" align="center" prop="dwBm" />
            <el-table-column label="职务" align="center" prop="zw" />
            <el-table-column label="负责内容" align="center" prop="fzNr" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="附件资料">
        <span slot="label"><i class="el-icon-date"></i> 附件资料</span>
        <div style="height: 77vh; overflow-y: auto;">
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="kjRyFjData">
<!--            <el-table-column label="序号" align="center" type="index" width="50"/>-->
            <el-table-column label="文件名称" align="center" prop="fileName" show-overflow-tooltip :formatter="getFileNames"/>
            <el-table-column label="文件大小" align="center" prop="fileSize" width="120"/>
            <el-table-column label="上传时间" align="center" prop="scTime" width="120"/>
            <el-table-column label="上传人" align="center" prop="scUser" width="120"/>
            <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
            <!-- 其他列配置 -->
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </vxe-modal>
</template>

<script>
import {getKjry, selectKjryGzlvByKjryId} from "@/api/kjry/kjry";

export default {
  name: "kjryXq",
  dicts: ['sys_user_sex','rcpt_zc','rcpt_sxly','rcpt_ryfl','rcpt_sf'],
  data() {
    return {
      dialogVisible: false,
      rowData: null,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
      kjRyFjData: [], //附件资料列表
      kjRyGzlvData: [], //科技人员工作履历列表
    };
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.dialogVisible = true;
      // this.rowData = row;
      //根据科研人员ID查询附件列表
      getKjry(row.kjryId).then(res => {
        this.rowData = res.data
        this.kjRyFjData = res.data.kjryFjList //将科技人员附件赋值到kjRyFjData
      })
      //根据科研人员ID查询工作履历列表
      selectKjryGzlvByKjryId(row.kjryId).then(res => {
        this.kjRyGzlvData = res.data.kjryGzlvList
      })

    },
  },

}
</script>

<style scoped>
/*文本靠右*/
.right-align-label {
  text-align: right;
}

</style>
